import './App.less';
import { Route,Routes } from 'react-router-dom';
import routers from './routes';

//定义一个组件来改变title的名字，此title在routes里面定义好
const DomTitle = ({item})=>{
  document.title = item.title
  return (
    <item.component title={item.title}/>
  )
}

function App() {
  return (
    <div className="App">
      {/* 定量路由规则 */}
      <Routes>
          {
            routers.map((item,index)=>{
              return (
                <Route 
                  key={index}
                  exact
                  path={item.path}
                  element={<DomTitle item={item}/>}
                  >
                    {/* 嵌套路由写在父路由里面：<Route>子路由</Route> */}
                    {item.children && item.children.map((item)=>{
                    return (
                      <Route key={item.title} exact path={item.path} element={<DomTitle item={item}/>}/>
                    )
                  })}</Route>
              )
            })
          }
      </Routes>
    </div>
  );
}

export default App;
